<template>
  <div class="login-page">
 <img  class="logo" src="@/assets/likedelogo.png" alt="">
   <el-card class="box-card">

<!-- 此处写随机数    用ref是为了调用 方法-->
  <div class="center">
    <div class="pic"><img :src="`https://likede2-java.itheima.net/api/user-service/user/imageCode/${this.clientToken}`" @click="changeNum" alt=""></div>
        <el-form  :model="form" :rules="rules" ref="xiaomi"  label-width="10px" class="demo-ruleForm">
  <el-form-item  prop="loginName">
    <el-input v-model="form.loginName"  prefix-icon="el-icon-mobile-phone"  type="text"  autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item  prop="password" >
    <el-input v-model="form.password" prefix-icon="el-icon-lock"  type="password"  autocomplete="off"> </el-input>
  </el-form-item>
  <el-form-item  prop="code">
    <el-input v-model="form.code"  prefix-icon="el-icon-finished" placeholder="请输入验证码" maxlength='4' @keydown.enter="login"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" style="width:450px " @click="login">登录</el-button>
  </el-form-item>
</el-form>
     </div>

</el-card>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LikedePcVueIndex',

  data () {
    return {
      form: {
        loginName: '',
        password: '',
        code: '',
        mobile: '',
        clientToken: '1',
        loginType: '0',
        account: ''
      },
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 11, message: '账号为4~11位哦~', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{5,}/, message: '密码至少为6位哦~', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\w{4,}/, trigger: 'blur' }
        ]
      },
      clientToken: '1'
    }
  },
  // this.$router.push('/')
  methods: {
    changeNum () {
      this.clientToken = Math.random()
    },
    async login () {
      console.log(this.$refs.xiaomi)
      try {
        // 输入密码和验证码，测试是否校验成功
        const res = await this.$refs.xiaomi.validate()
        console.log(res)// true
        // console.log('通过校验,应该发请求了')

        // 此处是将输入的账号密码验证码传入 login接口里
        const res1 = await login(this.form)
        console.log(res1) // 登录成功 获得token
        // 将res1.token 传入user/modules  存入本地
        this.$store.commit('user/setUserToken', res1.token)
        this.$message.success('登录成功')
        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-page {
  position: relative;
  width: 100%;
  min-height: 800px;
  background: url("@/assets/likedeBackground.png") no-repeat center;
   .logo {
     position: absolute;
     height: 96px;
     width: 96px;
     top: 190px;
     left: 680px;
     z-index: 999;
   }
  .box-card {
    position: absolute;
    width: 500px;
    height: 360px;
    border-radius: 14px;
    top: 30%;
    left: 34%;
    background-color: #fff;
   .center {
     position: relative;
     margin-top: 80px;
  .pic {
    position: absolute;
    width: 120px;
    height: 40px;
    z-index: 999;
    top: 128px;
    left:340px;
    img {
      width: 100%;
      height: 100%;
    }
  }
   }
  }

}

</style>
